<template>
  <div class="loginHome">
    <!-- 登录表单 -->
    <el-form
      label-width="0px"
      class="logForm"
      :model="login_form"
      :rules="loginFromRules"
      ref="loginFormRef"
      @keyup.enter.native="login"
    >
      <el-form-item prop="account">
        <el-input
          style="opacity: 0.5"
          placeholder="请输入账号"
          prefix-icon="el-icon-user"
          v-model="login_form.account"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          style="opacity: 0.5"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          v-model="login_form.password"
          show-password
        />
      </el-form-item>
      <el-form-item id="btns">
        <el-button type="primary" icon="el-icon-s-check" @click="login" round
          >登录</el-button
        >
        <el-button type="info" icon="el-icon-refresh-right" @click="resetForm" round
          >重置</el-button
        >
        <el-button
          type="success"
          icon="el-icon-mobile"
          @click="dialogFormVisible = true"
          round
          >注册</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 注册弹出层 -->
    <el-dialog
      title="注册"
      :visible.sync="dialogFormVisible"
      width="450px"
      :modal-append-to-body="false"
      ref="dialog"
    >
      <regHome ref="reg" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="reg">注 册</el-button>
        <el-button @click="reSet">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import regHome from "@/components/login/loginItem/regHome";
export default {
  name: "loginHome",
  components: {
    regHome,
  },
  data() {
    return {
      //登录时的表单绑定
      login_form: {
        account: "",
        password: "",
      },
      //登录的表单验证规则
      loginFromRules: {
        //验证账号
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        //验证密码
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 15,
            message: "长度在 5 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      //控制弹出框
      dialogFormVisible: false,
    };
  },
  methods: {
    reSet() {
      this.dialogFormVisible = false;
      this.$refs.reg.reSet();
    },
    //表单重置
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    },
    // 登录预验证
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        //简化json文件
        const { data: res } = await this.$http.post("userLogin", this.login_form);
        // const result = this.$http.get('userLogin', this.login_form)
        // console.log(res.data.id);
        //处理状态码
        if (res.code == -1) {
          this.$message.error("密码错误，请重新输入");
        } else if (res.code == 1) {
          this.$message.success("登录成功");
          //需要的信息存入vuex
          window.sessionStorage.setItem("token", res.token);
          this.$store.dispatch("getUserData", res.data);
          this.$router.push("/userHome");
          // location.reload(true)
        } else if (res.code == -2) {
          this.$message.warning("用户不存在");
        }
        //拿到用户id
        // this.$emit('userId',res.data.id)
        // console.log(res.data.id);
      });
    },
    //调用注册组件里的提交表单
    reg() {
      this.$refs.reg.reg();
      setTimeout(() => {
        this.dialogFormVisible = this.$refs.reg.dialogFormVisible;
      }, 1000);
    },
  },
};
</script>

<style scoped>
.logForm {
  position: absolute;
  width: 350px;
  height: 150px;
  left: 10%;
  top: 38%;
}

#btns {
  display: flex;
  justify-content: flex-end;
}
</style>
